<template>
	<view >

    <navbar fixed leftIcon="left" :title="symbol + ' 贡献池记录'" shadow></navbar>
    <liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" style="background-color:#fff;" class="m-t-10 m-b-10" @tabClick="changeIndex"/>
    <view class="bg-fff">
      
      <view class="width100 h57 view flex-row align-center" v-if="defaultIndex == 0">
          <view class="fz-12 c_3c3 flex-1 view  align-center">时间</view>
          <view class="fz-12 c_3c3 flex-1 view  align-center">收益</view>
          <view class="fz-12 c_3c3 flex-1 view  align-center">状态</view>
      </view>
      <view class="width100 h57 view flex-row align-center" v-else>
          <view class="fz-12 c_3c3 flex-1 view  align-center">时间</view>
          <view class="fz-12 c_3c3 flex-1 view  align-center">通证数</view>
		  <view class="fz-12 c_3c3 flex-2 view  align-center">NFT</view>
		  <view class="fz-12 c_3c3 flex-1 view  align-center">状态</view>
      </view>

      <view v-if="list.length > 0" class="list autoH" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
          <sib-list :scrollHeight="getScrollH()" ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn">
              <block slot="sibScrollList">
                <view v-if="defaultIndex == 0">
                    <view class="view flex-row align-center justify-center h44 b-b-1" v-for="(item,index) in list" :key="index">
                      <view class="flex-1 view align-center justify-center">
                        <view class="c-c4 fz-10">{{item.create_time}}</view>
                      </view>

                      <view class=" flex-1 view align-center justify-center">
                        <view class="c_3c3 fz-12">{{ item.earnings }}</view>
                      </view>

                      <view class="flex-1 view align-center justify-center">
                        <view class="c_3c3 fz-12">{{item.status | textStatus}}</view>
                      </view>
                  </view>
                </view>

                <view v-else>
                    <view class="view flex-row align-center justify-center h44 b-b-1" v-for="(item,index) in list" :key="index">
                      <view class="flex-1 view align-center justify-center">
                        <view class="c-c4 fz-10">{{item.create_time}}</view>
                      </view>
                      <view class="flex-1 view align-center justify-center">
                        <view class="c_3c3 fz-12">{{item.stake_token}}</view>
                      </view>
					  <view class="flex-2 view align-center justify-center">
					    <view class="c_3c3 fz-12">{{item.nft_string}}</view>
					  </view>
					  <view class="flex-1 view align-center justify-center">
					    <view class="c_3c3 fz-12">{{item.state | stakeHistory}}</view>
					  </view>
                  </view>
                </view>
              </block>
          </sib-list>
      </view>
      <noData :custom="true" v-if=" list.length == 0">
        <view class="c_fff fz-12 c_3c3">暂无数据</view>
      </noData>

      
    </view>
     
	</view>
</template>

<script>
  import liuyunoTabs from '@/components/liuyuno-tabs/liuyuno-tabs.vue'
  import navbar from '@/components/uni-nav-bar'
  import noData from '@/components/noData/noData'
  import sibList from '@/components/sib-list/sib-list.vue'
  import { getLogList } from '@/apis/pool'
	export default {
    components: {
      noData,
      sibList,
      navbar,
      liuyunoTabs
		},
		data() {
			return {
        tabs: ['收益记录','质押记录'],
		basic_id: 1,
        defaultIndex: 0,
        type: 1,
        active: 0,
        list: [],
        page: 1,
        rows: 10,
        total: 0,
		symbol: '',
        more: 'more',
        items: [
          {name: '已完成', key: 0},
          {name: '已作废' , key: 1}
        ],
        showSelect: false
			}
    },
    filters:{
		textStatus(value){
			if(value == 0){
				return '待领取'
			}
			return '已领取'
		},
		stakeHistory(value){
			if(value == 1){
				return '质押中'
			}
			return '已解除'
		}
	},
    mounted() {
      this.getList(true)
    },
	onLoad (opt) {
	    this.basic_id = opt?.basic_id ?? '1';
		if(this.basic_id == 2){
			this.symbol = 'CHB';
		}else{
			this.symbol = 'DSX'
		}
	},
	methods: {
      formaJson(item) {
        return JSON.pase(item)
      },
      hideSelect() {
        this.$refs.selector.bodyCloseMenus()
      },
			touchstart: function(e) {
				this.$refs.sibList.refreshStart(e);
			},
			touchmove: function(e) {
				this.$refs.sibList.refreshMove(e);
			},
			touchend: function(e) {
				this.$refs.sibList.refreshEnd(e);
      },
      getScrollH() {
        return uni.getSystemInfoSync() - 80 + 'px'
      },
			isRefresh: function() {
        const _this = this
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					// const defaultData = [
					// 	'初始数据1', '初始数据2', '初始数据3', '初始数据4',
					// 	'初始数据5', '初始数据6'
					// ]
          // _this.list = defaultData
          this.getList(true, () => {
            this.$refs.sibList.endAfter()
          })
					// 刷新结束调用
				}, 1000)
			},
			scrolltolowerFn: function() {
        if (this.list.length == this.total) {
          return false
        }
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				// 模拟请求
				const _this = this
				setTimeout(() => {
					// 请求成功
					this.getList(null, () => {
            uni.hideLoading()
          })
					
				}, 1000)
			},
      changeIndex(i) {
        this.defaultIndex = i
        if (i == 0) {
          this.type = 1
        } else {
          this.type = 2
        }
        this.getList(true)
      },
      async getList(isReflush, cb) {
        if (isReflush) {
          this.page = 1
        } else {
          this.page++
        }
        const res = await getLogList({pages: this.page, type: this.type, basic_id: this.basic_id, limit: 10})
        if (this.page == 1) {
          this.total = res.data.total
          this.list = res.data.list
        } else {
          this.list = [...this.list, ...res.data.list]
        }
        cb && cb()
      },
			onNavigationBarButtonTap(e) {
          if (e.index == 0) {
            this.showSelect = true
          }       
      },
		}
	}
</script>

<style lang="scss" scoped>
page {
    background-color:#F6F6F6;
    box-sizing: border-box;
    overflow-y: hidden;
		
  }
.bo {
  border:2px solid #343438;
}
.show-detail {
  border-radius: 60rpx;
}
/deep/.auto-h {
  height: calc(100vh - 220rpx) !important;
}
.autoH {height: calc(100vh - 430rpx);}
.bor-line {
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.3;
  height: 1px;
}
/deep/.auto-h {height:calc(100vh - 90rpx)!important; }
 .bgs {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
 .b-b-1 {border-bottom: 1px solid #eee;}
</style>
